import { Component } from 'react'
import { View } from "@tarojs/components"
import { AtTabs, AtTabsPane } from 'taro-ui'
import CustomHeader from '../components/CustomHeader/index'

import "taro-ui/dist/style/components/tabs.scss";

export default class Category extends Component{
    constructor(){
        super(...arguments)
        this.state = {
            current: 0,
            tabList: [
                { title: '标签页1' }, { title: '标签页2' }, { title: '标签页3' }, { title: '标签页2' }, 
                { title: '标签页3' }
            , { title: '标签页2' }, { title: '标签页3' }, { title: '标签页2' }, { title: '标签页3' }
            , { title: '标签页2' }, { title: '标签页3' }, { title: '标签页2' }, { title: '标签页3' }
            , { title: '标签页2' }, { title: '标签页3' }, { title: '标签页2' }, { title: '标签页3' }
            , { title: '标签页2' }, { title: '标签页3' }, { title: '标签页2' }, { title: '标签页3' }
            , { title: '标签页2' }, { title: '标签页3' }, { title: '标签页2' }, { title: '标签页3' }
            , { title: '标签页2' }, { title: '标签页3' }, { title: '标签页2' }, { title: '标签页3' }
            , { title: '标签页2' }, { title: '标签页3' }, { title: '标签页2' }, { title: '标签页3' }
            , { title: '标签页2' }, { title: '标签页3' }, { title: '标签页2' }, { title: '标签页3' }
            ]
        }
    }

    /**
     * 改变当前标签的值
     * @param {*} value 
     */
    handleClick (value) {
        this.setState({
            current: value
        })
    }

    render(){
        const { current, tabList } = this.state
        return(
            <View>
                <CustomHeader></CustomHeader>
                <View>
                    <AtTabs 
                        current={current} 
                        tabList={tabList} 
                        onClick={this.handleClick.bind(this)}
                        tabDirection='vertical'
                    >
                        <AtTabsPane current={current} index={0} >
                        <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >标签页一的内容</View>
                        </AtTabsPane>
                        <AtTabsPane current={current} index={1}>
                        <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
                        </AtTabsPane>
                        <AtTabsPane current={current} index={2}>
                        <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
                        </AtTabsPane>
                    </AtTabs>
                </View>
            </View>
        )
    }
}